<template>
  <div id="contain">
    <div class="box">
      <el-form ref="form" :model="form" label-width="130px">
        <el-form-item label="线路名称" style="width: 500px" :rules="rules">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="线路图片" :rules="rules">
          <el-upload
            action=""
            list-type="picture-card"
            :file-list="fileList"
            :http-request="upload"
            :before-upload="beforeUpload"
            ref="uploadXianlu"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="类型" :rules="rules">
          <el-select v-model="form.type" placeholder="请选择线路类型">
            <el-option label="跟团" value="1"></el-option>
            <el-option label="私团" value="2"></el-option>
            <el-option label="自助" value="3"></el-option>
            <el-option label="半自助" value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="出发地与目的地" :rules="rules">
          <el-col :span="8" style="margin: 0 10px 0 0">
            <el-input
              v-model="form.startAddr"
              placeholder="请填写出发地"
            ></el-input>
          </el-col>
          <el-col :span="1"> --</el-col>
          <el-col :span="9">
            <el-input
              v-model="form.endAddr"
              placeholder="请填写目的地"
            ></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="路线" style="width: 600px" :rules="rules">
          <el-input v-model="form.route"></el-input>
        </el-form-item>

        <el-form-item label="持续天数" style="width: 300px" :rules="rules">
          <el-input v-model="form.days"></el-input>
        </el-form-item>
        <el-form-item label="成人价" style="width: 250px" :rules="rules">
          <el-input v-model="form.adPrice"></el-input>
        </el-form-item>
        <el-form-item label="儿童价" style="width: 250px" :rules="rules">
          <el-input v-model="form.chPrice"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit" :disabled='!this.fileUrl'>立即创建</el-button>
          <el-button @click="back">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import utils from '@/assets/utils'

export default {
  data() {
    return {
      token: window.localStorage.getItem("token"),
      form: {},
      rules: { required: true },
      fileList: [],
      imgForm: new FormData(),
      imgUrl: "",
      fileName: "",
      fileUrl: "",
    };
  },
  methods: {
    onSubmit() {
      let data = {};
      for (let k in this.form) {
        if (k === "adPrice") {
          data["adPrice"] = parseInt(this.form["adPrice"]);
        } else if (k === "chPrice") {
          data["chPrice"] = parseInt(this.form["chPrice"]);
        } else {
          data[k] = this.form[k];
        }
      }
      // console.log(data);
      this.$axios({
        method: "post",
        url: "/route/add",
        headers: { token: this.token },
        data: data,
      }).then((res) => {
        console.log(res);
        if (res.data.code === 0) {
          this.$message({
            type: "success",
            message: "创建成功！",
          });
          this.back()
          utils.$emit('getMyXianluList')
          return true
        }
        if (res.data.code === 500) {
          this.$message({
            type: "error",
            message: res.data.msg,
          });
        }
      });
    },
    back() {
      this.form = {};
      this.fileUrl  = ''
      this.$refs['uploadXianlu'].clearFiles()
    },
    upload() {
      this.$axios({
        method: "post",
        url: "/oss/upload/route",
        headers: { token: this.token },
        data: this.imgForm,
      }).then((res) => {
        let data = res.data;
        if (data.code !== 0) {
          this.$message.error(res.data.msg);
          return false;
        }
        this.fileName = data.name;
        this.fileUrl = data.url;
        this.form.pic = this.fileUrl;
        // this.$message.success("上传成功");
      });
    },
    beforeUpload(file) {
      if (file) {
        this.imgForm.append("file", file);
      } else {
        return false;
      }
    },
  },
};
</script>
<style  scoped>
.box {
  width: 900px;
  margin: 30px 20px;
}
</style>>
